<template>
  <div class="publist">
    <div class="header" id="header">
      <div class="title">
        <div class="headline fl">
          <img class="fl" src="../../static/images/j-logo.png"/>
          <span class="title_top fl"><router-link :to="{path:'/homepage'}">企业风险分析与研判系统</router-link></span>
        </div>
        <ul class="fl">
          <!-- <router-link tag="li" active-class="active" :to="{path:'/pandect'}">
            <img src="../../static/images/zonglan.png">
            总览
          </router-link> -->
          <router-link tag="li" active-class="active" :to="{path:'/homepage'}">
            <img src="../../static/images/fengxianyujing.png">
            风险预警
          </router-link>
          <router-link tag="li" active-class="active" :to="{path:'/statAnaly'}">
            <img src="../../static/images/tongjifenxi.png">
              统计分析
          </router-link>
          <router-link tag="li" active-class="active" :to="{path:'/enterPrise'}">
            <img src="../../static/images/jianguanqiye.png">
            监管企业
          </router-link>
          <router-link tag="li" active-class="active" :to="{path:'/clibsearch'}">
            <img src="../../static/images/qiyeku.png">
            企业库
          </router-link>
          <!-- <router-link tag="li" active-class="active" :to="{path:'/blacklistDetail'}" >
            <img src="../../static/images/heimingdan.png">
            企业黑名单库
          </router-link> -->
          <!-- 未调完 -->
          <router-link tag="li" active-class="active" :to="{path:'/managements'}" >
            <img src="../../static/images/manangeMent.png">
              案件处置管理
          </router-link>
          <!-- 功能暂未开发 -->
          <router-link tag="li" active-class="active" :to="{path:'/sysManage'}">
            <img src="../../static/images/shezhi.png">
            系统管理
          </router-link>
        </ul>
        <div class="personage-news fr">
          <div class="news fl"><i class="iconfont icon-admin"></i>&nbsp;&nbsp;{{username}}</div>
          <div @click="logout" class="news exit fr"><i class="iconfont icon-tuichu"></i>&nbsp;&nbsp;退出</div>
        </div>
      </div>
    </div>
    <div class="main">
      <keep-alive>
        <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta || !$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script>
import { homepage as api } from '../../api'
export default {
  name: 'layout',
  data() {
    return {
      username: '',
      token:'',
      data:[],
      ie:false
    }
  },
  mounted() {
    let username = this.$store.state.user.userInfo.realName
    this.token = this.$store.state.user.userInfo.token
    this.username = username || ''
    const header = document.getElementById('header')
    // this.isIe()
    // this.istoken()
    if (this.$route.path.split('/')[1] === 'clibdetail' || this.$route.path.split('/')[1] === 'entdetail') {
      header.style.position = 'sticky'
      header.style.position = '-webkit-sticky'
      header.style.top = '0'
    } else {
      header.style.position = 'static'
    }
  },
  watch:{
    '$route.path':function(now, old) {
      const header = document.getElementById('header')
      if (now.split('/')[1] === 'clibdetail' || now.split('/')[1] === 'entdetail') {
        header.style.position = 'sticky'
        header.style.position = '-webkit-sticky'
        header.style.top = '0'
      } else {
        header.style.position = 'static'
      }
    }
  },
  methods: {
    logout() {
      this.$store.dispatch('logout').then(() => {
        this.$router.push('/login')
      })
    },
    istoken() {
      if (!this.token) {
        this.$router.push('/login')
      }
      api
        .getRiskList().then(ret => {
          this.data = ret.data
        }).catch(err => {
          console.log(err.msg)
          if (err.msg === '无效token') {
            this.tips(err.msg, 'error')
            setTimeout(() => {
              this.$router.push('/login')
            }, 1000)
          }
        })
    },
    isIe() {
      let u = window.navigator.userAgent.toLocaleLowerCase()
      let ie11 = /(trident)\/([\d.]+)/
      let b = u.match(ie11)
      if (b) {
        this.ie = true
      } else {
        this.ie = false
      }
    }
  },
  computed: {}
}
</script>

<style lang="scss" scoped>
.main {
  width: 1360px;
  margin: 0 auto;
  min-height: calc(100vh - 65px);
  padding-bottom: 45px;
}
.publist {
  width: 100%;
  background: #f9f9f9;
  .header {
    color: #fff;
    z-index: 2;
    border-bottom: 1px solid #003a79;
    background: linear-gradient(90deg,#003a79,#004891);
    min-width: 1360px;
    .title_top {
      padding: 15px 0;
      a {
        font-size: 24px;
        color: #f0f0f0;
      }
    }
    .title {
      height: 68px;
      margin: 0 auto;
      display: flex;
      padding: 0 25px;
      z-index: 99999;
      .title_top a:hover {
        text-decoration: none;
      }
      ul {
        margin: 0px 4%;
        font-size: 14px;
        li {
          // padding: 10px 30px;
          height: 100%;
          padding: 0 25px;
          cursor: pointer;
          float: left;
          text-align: center;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            margin-bottom: 5px;
          }
        }
      }
      .personage-news {
        position: absolute;
        right: 40px;
        line-height: 65px;
      }
      .news {
        cursor: pointer;
        color: #accaff;
        font-size: 14px;
      }
      .exit {
        padding-left: 20px;
      }
    }
  }
}
.active {
  background: url(../assets/images/tab.png) no-repeat;
  background-size:100% 100%;
  color: #fff;
}
.publist .header .title {
  img {
    width: 75px;
    height: 65px;
  }
}
.publist .header .title .search input:focus {
  box-shadow: 0 0 5px #69b3fe;
}
.publist .header .title ul li:hover {
  background: rgba(52, 128, 243, 1);
}
.publist .header .title ul li.active:hover {
  background: rgba(18, 109, 214, 0.8);
}
</style>



// WEBPACK FOOTER //
// src/view/layout.vue
